<template>
	<!-- 消耗的积分，产生的订单详情 -->
	<view class="jfhome-view"> 
		<up-navbar title="" @leftClick="leftClick"  :placeholder='true'> </up-navbar> 
		<view class="dh-continar" v-if="showResult"> 
			<image v-if="infoModal.state == 2" src="https://oss.jtmckj.com/wmp/jfsc/pay/dh-icon.png" mode=""></image> 
			<view v-if="infoModal.state == 1 " class="dh-title">正在兑换中...请稍等（可手动刷新）</view>
			<view v-if="infoModal.state == 2" class="dh-title">兑换成功</view>
			<view v-if="infoModal.state == -1 " class="dh-title">兑换失败</view> 
		</view> 
		<view class="product-continar">
			<view class="top-box" @click="toCouponDetails">
				<view style="display: flex;align-items: center;">
					<image v-if="infoModal?.attachment" class="logo" :src="infoModal.attachment" mode="aspectFill"> </image>
					<image v-else class="logo" src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/goods/goods_def_c.png" mode="aspectFill"> </image>
					<view class="pro-title">
						{{infoModal.goodsInfo}}
					</view>
				</view>
				<image class="arrow" src="https://oss.jtmckj.com/wmp/jfsc/pay/arrow.png" mode=""></image>
			</view>
			<view class="">
				<!-- <view class="content-bot">
					<view class="label">
						消耗积分
					</view>
					<view class="value" v-if="infoModal.payList">
						{{infoModal.payList[0].payAmt || 0}}积分
					</view>
					<view class="value" v-else>
						0积分
					</view>
				</view> -->
				<!-- <view class="content-bot">
					<view class="label">
						支付金额
					</view>
					<view class="value" v-if="infoModal.payList">
						{{infoModal.payList[0].payAmt || 0}}元
					</view>
					<view class="value" v-else>
						0元
					</view>
				</view> -->
				
				<!-- 目前单支付情况非组合方式 -->
				<view class="content-bot" v-if="orgCode == '0021'">
					<view class="label">
						支付金额
					</view>
					<view class="value" v-if="infoModal.payList">
						<view v-for="(item,index) in infoModal.payList" :key="index"> 
						    <!--1积分 2会员卡余额 3 微信支付 -->
							<text v-if="item.payType == 3">{{item.payAmt || 0}}元</text> 
						</view> 
					</view>
					<view class="value" v-else>
						0元
					</view>
				</view>
				
				<!-- 目前单支付情况非组合方式 -->
				<view class="content-bot" v-else>
					<view class="label">
						消耗积分
					</view>
					<view class="value" v-if="infoModal.payList">
						
						<!--1积分 2会员卡余额 3 微信支付 -->
						<!-- <view v-for="(item,index) in infoModal.payList" :key="index"> 
							<text v-if="item.payType == 1">{{item.payAmt || 0}}积分</text> 
						</view> -->
						
						<!-- 单支付才有的判断方式，组合支付此处作废 -->
						<text v-if="infoModal.payList[0].payType == 1">{{infoModal.payList[0].payAmt || 0}}积分</text> 
						<text v-else>0积分</text> 
						
					</view>
					<view class="value" v-else>
						0积分
					</view>
				</view>
				
				<view class="content-bot">
					<view class="label">
						兑换时间
					</view>
					<view class="value">
						{{infoModal.payTime}}
					</view>
				</view>
				<view class="content-bot">
					<view class="label">
						兑换流水号
					</view>
					<view class="value">
						{{infoModal.orderCode}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad, onUnload, onReachBottom, onPullDownRefresh, onShow, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { goodsPublic } from '@/pagesPointShop/api/goods.js';
	import { ref, reactive } from 'vue';
	import { useUserStore } from '@/store/user.js';
	import { initStatusBarHeight } from "@/until/tools.js" 
	
	// shopInfo下必有： brandCode: "0003"   orgCode : "0015"
	const orgCode = uni.getStorageSync('shopInfo').orgCode
	
	const navbarHeight = computed(() => {
		return initStatusBarHeight() || 200;
	});

	const store = useUserStore();
	const batchCode = ref('') 
	const countInterval = ref(0) 
	const infoModal = ref({}); 

	const showResult = ref(true);

	onLoad((options) => { 
		if (options.showResult) showResult.value = false
		batchCode.value = options.code 
		countInterval.value = 0
		initData()
		setIntervalFun()
	});

	onShow(() => {
        // initData()
	});

	onUnload(() => {
		// 页面卸载时，移除监听器
		// uni.$off('onNavigationBarButtonTap', onNavigationBarButtonTap);
		clearCountdownFun()
	});
	
	// 定义一个定时器变量
	let countdownInterval = null; 
	const setIntervalFun = () => {
	    countdownInterval = setInterval(() => {
			// 依旧兑换中
			if(infoModal.value.state == 1 || countInterval.value < 2){
				countInterval.value += 1
				initData()
			}else{
				clearCountdownFun()
			} 
	    }, 5000);
	}; 
	// 清除  
	const clearCountdownFun = () => {
	    if (countdownInterval) {
	        clearInterval(countdownInterval);
	    }
	};
	

	// 获取订单商品详情信息
	const initData = () => {
		let modal = {
			"functionName": "GetMemberMallOrderPay", 
			"contentData": {
				"code": batchCode.value
			}
		}
		goodsPublic(modal).then(res => {
			// console.log('initData', res)
			if (res.opFlag !== '1') {
				return
			}
			infoModal.value = res.content.rowData  
		})
	} 
	 

	// 导航栏按钮点击事件处理函数 
	const onNavigationBarButtonTap = (e) => {
		console.log('Navigation button tapped', e);
		// 根据e.index或e.buttonId来区分不同按钮的点击事件
		if (e.index === 0 || e.buttonId === 'search') {
			// 执行搜索按钮的逻辑
			console.log('Search button tapped');
		} else {
			console.log('return...');
			// return
		}
	}

	const leftClick = () => {
		if (showResult.value) {
			uni.reLaunch({
				url: '/pagesPointShop/view/index'
			})
		} else {
			uni.navigateBack()
		}

	}

	const toCouponDetails = () => {
		console.log('toCouponDetailsClick');
		uni.switchTab({
			url:'/pages/coupon/index'
		})
		// let modal = {
		// 	id: '123测试-暂时不需要传参'
		// }
		// wx.navigateToMiniProgram({
		// 	appId: 'wxd86a4a7087a1ed03',
		// 	path: '/pages/code/index/index',
		// 	extraData: modal,
		// 	envVersion: 'develop', //develop开发版  trial体验版  release正式版 
		// 	success(res) {
		// 		// 打开成功
		// 	}
		// })
		// wx.navigateBackMiniProgram({
		//   extraData: {
		//     // 传递给当前小程序的数据，可选
		//   },
		//   success(res) {
		//     // 返回成功的回调函数
		//   },
		//   fail(res) {
		//     // 返回失败的回调函数
		//   }
		// })
	}
</script>

<style scoped lang="less">
	.jfhome-view {
		padding: 0 24rpx;
		height: 100vh;
		background-color: #f2f2f2;
	}

	.dh-continar {
		height: 180rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			margin-right: 20rpx;
			width: 60rpx;
			height: 60rpx;
		}

		.dh-title {
			font-weight: bold;
			font-size: 36rpx;
			color: #FF6A00;
		}
	}

	.product-continar {
		margin-top: 24rpx;
		padding: 24rpx 24rpx 40rpx 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.top-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.logo {
				width: 120rpx;
				height: 120rpx;
			}

			.pro-title {
				margin-left: 29rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #212121;
			}

			.arrow {
				width: 14rpx;
				height: 24rpx;
			}


		}

		.content-bot {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.value {
				font-weight: 500;
				font-size: 28rpx;
				color: #212121;
			}
		}

	}
</style>